window.onload=showPic;
function showPic(){
	var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
    var a = document.getElementById("zz");
    var b = document.getElementById("zzz");
    var c = document.getElementById("zzzz");
    var d = document.getElementById("zzzzz");
    var e = document.getElementById("zzzzzz");
    var head = document.getElementById("header-img");
    var header = document.getElementById("header");
    var time;
    if(t == 0){
    	head.style.transform = "scale(1)";
    	head.style.transition = "all 1s";
    }
    else if(t > 0){
    	head.style.transform = "scale(0.5)";
    }
    if( t >= 400 && t < 800 ){ //当距离顶部超过300px时
		$("#zz").addClass("animated bounceIn");
		a.style.visibility = "visible";
    }
    else if(t >= 700 && t <1200 ){
		$("#zzz").addClass("animated bounceIn");
		$("#zzzz").addClass("animated bounceIn");
		b.style.visibility = "visible";
		c.style.visibility = "visible";
    }
    else if(t >= 1200 && t < 1800 ){
		$("#zzzzz").addClass("animated bounceIn");
		$("#zzzzzz").addClass("animated bounceIn");
		d.style.visibility = "visible";
		e.style.visibility = "visible";
    }
    else if(t >= 2000 && t < 2200 ){
		$("#zzzzzz").addClass("animated fadeInDownBig");
    }
    else if(t >= 2400 && t < 2500 ){
		$("#zzzzzzz").addClass("animated fadeInUp");
    }
	time=setTimeout("showPic()",100);
}
function play(){
	var a = document.getElementById("video-img");
	var b = document.getElementById("video");
	a.style.display="none";
	b.play();
}
function none(){
	var a = document.getElementById("Maskleft");
	a.style.display = "none";
}
function Maskleft(){
	var a = document.getElementById("Maskleft");
	var l1 = document.getElementById("l1");
	var l2 = document.getElementById("l2");
	var l3 = document.getElementById("l3");
	var l4 = document.getElementById("l4");
	l1.style.animation="fadeOutRightBig 0.5s 0.1s";
	l2.style.animation="fadeOutRightBig 0.4s 0.2s";
	l3.style.animation="fadeOutRightBig 0.3s 0.3s";
	l4.style.animation="fadeOutRightBig 0.2s 0.4s";
	a.style.animation="rotateOutDownRight 0.8s 0.5s";
	setTimeout("none()",1300);
}
function left(){
	var a = document.getElementById("Maskleft");
	var l1 = document.getElementById("l1");
	var l2 = document.getElementById("l2");
	var l3 = document.getElementById("l3");
	var l4 = document.getElementById("l4");
	a.style.display = "block";
	a.style.animation="rotateInDownLeft 0.8s";
	l1.style.animation="fadeInLeftBig 1s 0.1s";
	l2.style.animation="fadeInLeftBig 1.1s 0.2s";
	l3.style.animation="fadeInLeftBig 1.2s 0.3s";
	l4.style.animation="fadeInLeftBig 1.3s 0.4s";
}
